<!DOCTYPE html>
<html>
<head>
    <title>临时车辆停车管理-车主入场信息</title>
    <link rel="stylesheet" href="/static/assets/css/layui.css" media="all">
</head>
<body>
<div class="layui-input-inline">
    <input type="text" name="title" required lay-verify="required" id="carNum" placeholder="车牌号" autocomplete="off"
           class="layui-input">
</div>
<button type="button" class="layui-btn" id="search">查询</button>
<button type="button" class="layui-btn" id="reset">重置</button>
<table id="userList" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs edit" lay-event="edit" id="1">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除选中行</button>
    </div>
</script>
<script src="/static/assets/layui.all.js" charset="utf-8"></script>
<script src="/static/assets/jquery.min.js"></script>
<script>
    $(function () {

        layui.use(['table', 'layer'], function () {
            var table = layui.table,
                layer = layui.layer;
            //第一个实例
            table.render({
                elem: '#userList'
                , url: '/accessInfo/selectAllLinShi' //数据接口
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '用户数据表'
                , cols: [
                    [ //表头\
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'accessId', title: 'ID', sort: true}
                        , {field: 'inDate', title: '入场时间', sort: true}
                        , {field: 'outDate', title: '出场时间', sort: true}
                        , {field: 'cost', title: '费用', sort: true}
                        , {field: 'carNum', title: '车牌号'}
                        , {field: 'type', title: '停车类型'}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                    ]
                ]
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data.accessInfos//解析数据列表
                    };
                }
                , page: true //开启分页
                , id: "userList"
            });

            $("#search").on("click", function () {
                var carNum = $("#carNum").val()
                table.reload('userList', {
                    where: { //设定异步数据接口的额外参数，任意设
                        carNum: carNum
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            })

            $("#reset").on("click", function () {
                location.reload()
            })
            // 监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        layer.msg("删除成功")
                        $.ajax({
                            url: "/accessInfo/deleteByAccessId",
                            type: "post",
                            dataType: "json",
                            headers: {'Content-Type': 'application/json;charset=utf8'},
                            data: JSON.stringify({accessId: data.accessId}),
                            success: function (res) {
                                if (res.code === 200) {
                                    console.log("删除成功")
                                    table.reload('userList', {
                                        where: { //设定异步数据接口的额外参数，任意设
                                            carNum: ''
                                        }
                                        , page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                    });

                                } else {
                                    console.log("删除失败")
                                }
                            },
                            error: function () {
                                console.log("删除失败")
                            }
                        })
                    });
                } else if (obj.event === 'edit') {
                    //页面
                    layer.open({
                        type: 2,
                        title: '详情页',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['650px', '80%'],
                        content: '/desk/LSDetails?accessId=' + data.accessId //iframe的url
                    });
                }
            });
            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        var idArray = []
                        for (var i = 0; i < data.length; i++) {
                            console.log("出入信息id为：" + data[i].accessId)
                            idArray.push(data[i].accessId)
                        }
                        console.log(idArray)
                        break;
                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                }
                ;
            });

        });

    })

</script>
</body>
</html>
